/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  BlobInputList, CCell, Cell, Input, InputLine, LineColumn, Select, Table, TableBody, TableRow, Text, TextArea, useTheme,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl} from "../../common/base";
import {config设备概况} from "./orcBase";
import {useMeasureInpFilter} from "../../common/hooks";
import {useThreeColumnView} from "../../hook/useThreeColumnSubr";
import {reviseBusiness} from "../../boiler/rarelyVary";
import {DirectLink} from "../../../routing/Link";
import Img_Seal from "../../../images/seal.png";


interface Props  extends InternalItemProps{
  config?: any[];    //有配置模式的 : 表对象的默认取值；
}
export const itemA下结论=['检验结论','检验日期','检验日期1','新下检日','结论说明','工程名'];
const itemA下结论2=[...itemA下结论, '检验类别'];
// const itemA下结论m=itemA下结论.concat(['工作压力','额定温度']);
//结论页的：
export const ConclusionglRef=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label,}:Props,  ref
    ) => {
      const [getInpFilter]=useMeasureInpFilter(null,itemA下结论2,);
      const {inp, setInp} = useItemInputControl({ ref });
      return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                  nestMd={nestMd} alone={alone} label={label!}>
        <Text variant="h5">{label}：</Text>
        <InputLine label='工程名称：'>
          <BlobInputList value={inp?.工程名 || ''} rows={2}
                         onListChange={v => setInp({...inp, 工程名: v || undefined}) } />
        </InputLine>
        必须符合要求才会有证书的。
        <InputLine  label='检验结论' >
          <Select inputSize="md" css={{minWidth:'140px',fontSize:'1.3rem',padding:'0 1rem'}}
                  value={ inp?.检验结论  ||''} onChange={e => setInp({ ...inp, 检验结论: e.currentTarget.value||undefined}) }>
            <option></option>
            <option>符合要求</option>
            <option>不符合要求</option>
          </Select>
        </InputLine>
        <LineColumn column={4}>
          <InputLine label='设置监检结束检验日期'>
            <Input value={inp?.检验日期 || ''} type='date'
                   onChange={e => setInp({...inp, 检验日期: e.currentTarget.value})}/>
          </InputLine>
          <InputLine  label='监检开始日期' >
            <Input  value={inp?.检验日期1 ||''}  type='date'
                    onChange={e => setInp({ ...inp, 检验日期1: e.currentTarget.value}) } />
          </InputLine>
          <InputLine  label='下次检验日期' >
            <Input  value={inp?.新下检日 ||''}  type='date'
                    onChange={e => setInp({ ...inp, 新下检日: e.currentTarget.value}) } />
          </InputLine>
        </LineColumn>
         {reviseBusiness(inp?.检验类别) ??'／'} 主要内容：
        <TextArea  value={inp?.结论说明 ||''} rows={9}
                   onChange={e => setInp({ ...inp, 结论说明: e.currentTarget.value||undefined}) } />
      </InspectRecordLayout>;
  });

//结论报告
export const ConclusionglRefVw= ({ orc, rep } : { orc: any, rep: any}
) => {
  const theme = useTheme();
  const [renderUpper,renderGaizao]=useThreeColumnView({orc, config:config设备概况,slash:true,split:[15]});
  return <>
    <div css={{"@media print": {paddingBottom: '3.5rem', pageBreakInside: 'avoid'}}}>
      <Text id={'Conclusion'} variant="h2" css={{textAlign: 'center', marginTop: '1rem',
      }}>电站锅炉改造和重大修理监督检验结论报告</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <Text>单位内编号：{orc?.单内编}</Text>
        <Text>报告编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["14.1%", "19%", "23%", "14.1%", "8%", "%"]  }
           css={{borderCollapse: 'collapse', "@media print": {marginTop: '-3.5rem'}}} tight miniw={800}>
      <TableBody>
        <RepLink rep={rep} tag={'Survey'}>
          <TableRow >
            <CCell colSpan={6}><Text css={{fontWeight: 800}}>锅炉基本情况</Text></CCell>
          </TableRow>
          {renderUpper}
          <TableRow >
            <CCell colSpan={6}><Text css={{fontWeight: 800}}>施工单位以及现场施工情况</Text></CCell>
          </TableRow>
          {renderGaizao}
        </RepLink>
        <RepLink rep={rep} tag={'Conclusion'}>
          <TableRow >
            <CCell>监检开始日期</CCell>
            <CCell colSpan={2}>{orc?.检验日期1}</CCell>
            <CCell>监检结束日期</CCell>
            <CCell colSpan={2}>{orc?.检验日期}</CCell>
          </TableRow>
          <TableRow>
            <Cell split={true} colSpan={6}><div css={{minHeight: '2rem', whiteSpace: 'pre-wrap'}}>
              &nbsp; {reviseBusiness(orc?.检验类别) ??'／'} &nbsp; 主要内容：<br/>
              {orc.结论说明 ?? '／' }
            </div></Cell>
          </TableRow>
          <TableRow >
            <CCell>检验依据</CCell>
            <CCell colSpan={5}>《锅炉安全技术规程》TSG 11-2020</CCell>
          </TableRow>
        </RepLink>
      </TableBody>
    </Table>
  </>;
};

export const 结论报告盖章= ({theme, orc, rep} :{theme: any, orc:any, rep:any}
) => {
  return <>
    <Table fixed={ ["8.6%","45%","4.2%","12%","%"]  }  css={ {borderCollapse: 'collapse' } } tight  miniw={800}>
      <TableBody>
        <DirectLink  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/Conclusion`}>
          <TableRow>
            <CCell colSpan={2}>监督检验结论</CCell>
            <CCell colSpan={3}>{orc?.检验结论}</CCell>
          </TableRow>
          <TableRow>
            <CCell>监检</CCell>
            <CCell>{orc.检验人IDs}</CCell>
            <CCell>日期</CCell>
            <CCell>{orc.检验日期 || '／'}</CCell>
            <CCell rowSpan={3}>
              <div css={{
                height:'6.5rem',
                '::before': {
                  filter: 'opacity(30%)',
                  width: '100%',
                  height: '100%',
                  backgroundImage: `url(${Img_Seal})`,
                  content: '" "',
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  backgroundRepeat: 'no-repeat',
                  backgroundPosition: 'center',
                }
              }}>
                <Table  fixed={ ["40%","%"]  } css={ {borderCollapse: 'collapse',height:'fill-available'} } tight  miniw={800}>
                  <TableBody>
                    <TableRow>
                      <CCell css={{border:'none'}}>机构核准证号：</CCell>
                      <CCell css={{border:'none'}}>{rep?.isp?.ispu?.agency?.apno}</CCell>
                    </TableRow>
                    <TableRow>
                      <CCell css={{border:'none'}} colSpan={2}>（检验机构公章或者检验专用章）</CCell>
                    </TableRow>
                    <TableRow>
                      <CCell css={{border:'none'}}>日期：</CCell>
                      <Cell css={{border:'none'}}>2024/03/04</Cell>
                    </TableRow>
                  </TableBody>
                </Table>
              </div>
            </CCell>
          </TableRow>
        </DirectLink>
        <TableRow>
          <CCell>审核</CCell>
          <CCell></CCell>
          <CCell>日期</CCell>
          <CCell></CCell>
        </TableRow>
        <TableRow >
          <CCell>批准</CCell>
          <CCell></CCell>
          <CCell>日期</CCell>
          <CCell></CCell>
        </TableRow>
      </TableBody>
    </Table>
  </>;
};
